<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基金计算器</title>
  <style>
    #calculator{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: relative; /** 相对布局 **/
      width: 400px;
      height: 600px;
      margin: 0 auto;
      border-radius: 12px;
      animation-name: example;
      animation-duration: 4s;
      box-shadow: 10px 1px 10px 2px rgba(30, 150, 150, 255);
    }
    table{
      margin: 0 auto;
    }
    tr{
      height: 45px;
    }
    button{
      display: inline-block;
      position: relative; /** 相对布局 **/
      width: 100%;
      height: 28px;
      font-size: 14px;
      white-space: nowrap;
      color: white;
      outline: none;
      border: 0;
      background-color: red;
      border-radius: 4px;
      cursor: pointer;
      transition: all .3s cubic-bezier(.645,.045,.355,1);
      -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
    }
    button:active{
      top: 2px; /**向下偏移2px **/
    }
    .footer,.header{
      font-size: 20px;
      font-weight: 600;
      text-align: center;
    }
    i{
      font-style:normal;
      display: inline-block;
      width: 30px;
      height: 30px;
      border: 1px solid #aff;
      border-radius: 50% 50%;
      animation:  rotate 5s linear infinite;
    }

    input{
      display: inline-block;
      position: relative;
      width: 177px;
      height: 24px;
      border-radius: 4px;
      border: 1px solid #aaa;
      animation: inp 1s;
    }

    @keyframes example {
      0%   {background-color: #aff;}
      50%  {background-color: white;}
      100% {background-color: #aff;}
    }

    @keyframes inp {
      0%   {right: -277px;}
      100% {right: 0;}
    }

  </style>
</head>
<body>
  <div id="calculator">
    <div class="header">
      <p>基金计算器</p>
    </div>
    <table>
      <thead>
        <th colspan="2">单个基金收益</th>
      </thead>
      <tbody>
        <tr>
          <td>请输入当前基金份额：</td>
          <td><input type="text" class="fe" oninput="filter(this)"></td>
        </tr>
        <tr>
          <td>请输入当前基金估值：</td>
          <td><input type="text" class="gz" oninput="filter(this)"></td>
        </tr>
        <tr>
          <td>请输入当前基金总额：</td>
          <td><input type="text" class="TSum" oninput="filter(this)"></td>
        </tr>
        <tr>
          <td><button onclick="getResult()">计算收益</button></td>
          <td><input type="text" class="sum" placeholder="0.00" readonly="readonly"></td>
        </tr>
        <tr>
          <td><button onclick="getResult1()">计算要卖出的份额</button></td>
          <td><input type="text" class="amount" placeholder="0.00" readonly="readonly"></td>
        </tr>
        <tr>
          <td><button onclick="revert()">重置</button></td>
          <td><input type="text" class="amount" readonly="readonly" placeholder="点击重置，重新输入"></td>
        </tr>
      </tbody>
    </table>
    <div class="footer">
      <p>基金稳住，不要慌</p>
    </div>
  </div>

  <script>
    let fe = document.getElementsByClassName('fe')[0]
    let gz = document.getElementsByClassName('gz')[0]
    let TSum = document.getElementsByClassName('TSum')[0]
    let sum = document.getElementsByClassName('sum')[0]
    let amount = document.getElementsByClassName('amount')[0]

    let type = 1

    function getResult(){
      this.check()
      if(this.type == 1){
        let nowSum = (Number(fe.value) * Number(gz.value))
        let income = (nowSum - Number(TSum.value)).toFixed(2)
        sum.value = income
      }
    }

    function getResult1(){
      this.check()
      if(this.type == 1){
        let nowSum = Number(fe.value) * Number(gz.value)
        let income = nowSum - Number(TSum.value)
        let Num = (income / Number(gz.value)).toFixed(2)
        amount.value = Num
      }
    }


    function revert(){
      fe.value = ''
      gz.value = ''
      TSum.value = ''
      sum.value = '0.00'
      amount.value = '0.00'
      location.reload()
    }

    function check(){
      if(fe.value == '' || gz.value == '' || TSum.value == ''){
        alert('输入内容不能为空')
        this.type = 0
      } else {
        this.type = 1
      }
    }

    function filter(obj){
      obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
      obj.value = obj.value.replace(/^[0]{1}/g,"");  //清除只输入一个0
      obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
      obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
      // obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
      if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        obj.value= parseFloat(obj.value);
      }
    }

  </script>
</body>

</html>
